<template>
	<view class="d-area d-head-area">
		<view class="bg-img" :style="getItemImg(info)"></view>
		<view class="infos">
			<view class="title">{{ info.propertyName}}</view>
			<view class="tags">
				<view class="tag" v-for="(item,i) in tags" :key="i"> {{ item }}</view>
			</view>
			<view class="tip">{{ info.slogan}}</view>
		</view>

		<view class="bar"></view>
	</view>
</template>

<script>
	export default {
		props:{
			info:Object
		},  
		data() {
			return {
              tags:[],
			};
		},
		mounted() {
			 this.tags = this.info.ztFeature.specialLabel.split(",")
		},
		methods:{
			getItemImg(e){
				console.log("数据",e);
				var url = this.mainImg(parseInt(e.propertyType),e.ztPicture)
				console.log("数据",url);
				var background = `url(${url}) center center / 100% 100%`; 
				return { background } 
			},
		}
	}
</script>

<style lang="scss">
	.d-head-area {
		.bg-img {
			background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
			height: 150px;
		}

		.title {
			font-size: 20px;
			font-weight: 600;
			margin: 10px 0;
		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			margin: 10px 0;
		}

		.tag {
			font-size: 12px;
			color: #000;
			margin: 0 10px 0 0;
			border-radius: 10px;
			background: #FCD201;
			padding: 2px 4px;
		}

		

		.tip {
			font-size: 12px;
			color: #ccc
		}
	}
</style>
